<template>
  <div class="drama">
    <img :src="drama.cover" alt="">
    <div class="detail">
      <div class="title">{{drama.name}}</div>
      <div class="types">
        <span>{{drama.catalog_name}}</span>
        <span>类型：{{drama.type_name}}</span>
      </div>
      <div class="tag">
        长篇完结
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:['drama']
}
</script>

<style lang="stylus" scoped>
.drama
  width 100%
  height .9rem
  padding .1rem
  position relative
  >img 
    width .7rem
    height .7rem
    overflow hidden
    border-radius 0.04rem
    background-repeat no-repeat
    background-position 50%
    background-size 100%
  .detail
    position absolute
    top .1rem
    right 0
    left 0
    padding-left .9rem
    .title
      width 100%
      overflow hidden
      text-overflow ellipsis 
      white-space nowrap
      color #000
      font-size .16rem
    .types
      margin-top 0.08rem
      color #9e9e9e
      font-size .12rem
      display flex
      >span 
        display block
        width 50%
        overflow hidden
        text-overflow ellipsis 
        white-space nowrap
    .tag
      color #9e9e9e
      font-size .12rem
  &:after
    content ""
    display block
    position absolute
    right 0
    bottom 0
    left .1rem
    border-bottom 1px solid #e0e0e0
  &:last-child:after
    border-color transparent
</style>